<template>
  <view class="page">
    <view class="card">
      <view class="card-bd">
        <view class="card-title">入校预约</view>
        <view class="card-desc">
          <image src="/static/images/icon_location.png" mode=""></image>
          北京市海定天安门工商银行侧门100m
        </view>
        <view class="image-list">
          <view class="image-item">
            <image src="" mode=""></image>
          </view>
          <view class="image-item">
            <image src="" mode=""></image>
          </view>
          <view class="image-item">
            <image src="" mode=""></image>
          </view>
        </view>
        <view class="card-desc">开放时间</view>
        <view class="card-meta">10:00AM-22:00PM</view>
      </view>
      <view class="card-ft">
        <view class="nav-item" @click="navTo('/pages/extAccess/flow/visitor/index')">
          <view class="nav-icon">
            <image src="/static/images/icon_access_record.png" mode=""></image>
          </view>
          <view class="nav-title">预约记录</view>
        </view>
        <view class="nav-item" @click="toGatePass()">
          <view class="nav-icon">
            <image src="/static/images/icon_access_idcard.png" mode=""></image>
          </view>
          <view class="nav-title">访客通行证</view>
        </view>
        <view class="card-button" @click="navTo('/pages/extAccess/flow/visitor/form')">访客预约</view>
      </view>
    </view>

    <view class="notice">
      <view class="title">入校预约须知</view>
      <view class="desc">1、最长申请时间为三天。</view>
      <view class="desc">2、审核通过后请在预约时段内凭访客通行证入校。</view>
      <view class="desc">3、随行人员最多添加4人。</view>
      <view class="desc">4、多辆车入校的，每辆车需单独一个申请。</view>
    </view>

    <!-- <view style="margin-left: 0rpx;margin-bottom: 10rpx;">
      <u-image style=" width: auto;  height: 200rpx; object-fit: contain;" src="/static/extAccess/img/logo.png"
        mode="heightFix"></u-image>
    </view>
    <view style="text-align: center;margin-bottom: 20rpx;">
      <u-image style=" width: auto;  height: 200px; object-fit: contain;margin-left: 0rpx;margin-right: 0rpx;"
        src="/static/extAccess/img/bg.png" height="300rpx" border-radius="20rpx"></u-image>
    </view>
    <view>
      <u-card :border="true" :show-head="false" style="margin: 1rpx;background-color: #FAFAFA;" border-radius="20">
        <view class="" slot="body">
          <u-grid class="grid" :col="3" :border="false">
            <u-grid-item @click="navTo('/pages/extAccess/flow/visitor/form')" style="background-color: #FAFAFA;">
              <u-icon size="100" label-pos="bottom" margin-top="10" label="访客预约"
                name="/static/extAccess/img/apply.png"></u-icon>
            </u-grid-item>
            <u-grid-item @click="navTo('/pages/extAccess/flow/visitor/index')" style="background-color: #FAFAFA;">
              <u-icon size="100" label-pos="bottom" margin-top="10" label="预约记录"
                name="/static/extAccess/img/visitor_list.png"></u-icon>
            </u-grid-item>
            <u-grid-item @click="toGatePass()" style="background-color: #FAFAFA;">
              <u-icon size="100" label-pos="bottom" margin-top="10" label="访客通行证"
                name="/static/extAccess/img/passport.png"></u-icon>
            </u-grid-item>
          </u-grid>
        </view>
      </u-card>
      <view style="font-size: 30rpx;margin-top: 70rpx;">
        <view style="font-weight: bold;font-size: 40rpx; margin-bottom: 40rpx;color: gray;">入校预约须知</view>
        <view style="line-height: 50rpx;color: gray;">
          <view>1、最长申请时间为三天。</view>
          <view>2、审核通过后请在预约时段内凭访客通行证入校。</view>
          <view>3、随行人员最多添加4人。</view>
          <view>4、多辆车入校的，每辆车需单独一个申请。</view>
        </view>
      </view>
    </view> -->
  </view>

</template>
<script>
  import HeadNavBar from '@/components/headnavbar/index';
  import {
    validatenull
  } from '@/common/validate.js'
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    components: {
      HeadNavBar
    },
    data() {
      return {
        show: false,
        head: '/static/aidex/images/head.png',
        imgList: [],
        todoCount: 3,
        menuList: []
      };
    },
    onLoad() {
      // this.getRotationList();
      // this.initMenu();
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      itemClick(index) {
        // console.log(index);
      },
      toGatePass() {
        let navigateBackUrl = 'pages/extAccess/workbeach/index';
        this.$u.route({
          url: 'pages/extAccess/flow/visitor/gatePass',
          params: {
            navigateBackUrl
          },
        })
      },
    }
  };
</script>
<style lang="scss">
  .page {
    padding-top: 482rpx;
    background: #F7F7F7 url('../../../static/images/access_bg.png') no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }

  .card {
    border-radius: 24rpx;
    padding: 48rpx 32rpx;
    margin: 0 24rpx 48rpx;
    background: #fff;
  }

  .card-ft {
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 32rpx;
    margin-top: 56rpx;
  }

  .card-title {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #000;
  }

  .card-desc {
    font-size: 24rpx;
    font-weight: 500;
    color: #999;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 8rpx;
      vertical-align: top;
    }
  }

  .card-meta {
    margin-top: 8rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #333;
  }

  .card-button {
    flex: 1;
    height: 96rpx;
    margin-left: 24rpx;
    box-shadow: 0px 6px 28px 1px rgba(57, 137, 252, 0.32);
    border-radius: 96rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
    background: #3989FC;
  }

  .nav-item {
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #333;
  }

  .nav-icon {
    width: 70rpx;
    height: 70rpx;
    margin: 0 24rpx 8rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }

  .image-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16rpx;
    margin: 32rpx 0;
  }

  .image-item {
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;

    &::before {
      content: '';
      display: block;
      width: 100%;
      padding-top: 100%;
    }

    image {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .notice {
    padding: 0 40rpx;
    margin: 48rpx 24rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;

    .title {
      margin-bottom: 16rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #000;
    }

    .desc {
      margin-bottom: 16rpx;
    }
  }
</style>